<template>
    <div class="discoveries-number">
        <ModalTitle title="物联网发现次数" />
        <div class="num-asc">
            <div class="left">
                <div class="title">今日发现问题次数</div>
                <div class="number">{{ TodayNum }}<span style="font-size: 1.4rem;color: #99A2AD;margin-left: 1rem;">次</span>
                </div>
            </div>
            <div class="right">
                <div class="title">物联网发现总数</div>
                <div class="number">{{ DiscoverNum }}<span
                        style="font-size: 1.4rem;color: #99A2AD;margin-left: 1rem;">次</span></div>
            </div>
        </div>
    </div>
</template>

<script>
// 物联网发现次数
import ModalTitle from '@components/ModalTitle/Index.vue'
import { ZongHeZhiFaDB } from '@/api/zhangzi'
export default {
    components: { ModalTitle },
    data() {
        return {
            TodayNum: 0, //今日发现问题次数
            DiscoverNum: 0, //物联网发现总数
        }
    },
    created() {
        this.getIoTFindsProblems()
    },
    methods: {
        async getIoTFindsProblems() {
            const res = await ZongHeZhiFaDB.IoTFindsProblemsAPI()
            if (res.success) {
                this.TodayNum = res.data.todayOrderCount || 0
                this.DiscoverNum = res.data.typeACount || 0
            } else {
                this.$message.error(res.message)
            }
        }
    },
}
</script>

<style lang="less" scoped>
.discoveries-number {
    width: 100%;
    height: 19.9rem;
    margin-bottom: 2rem;

    .num-asc {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 8.2rem;
        margin-top: 2.2rem;

        .left,
        .right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 200.6rem;
            height: 8.2rem;
            background-image: url('../../../../assets/images/zhangzi/tongji/jinri.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .title {
                width: 100%;
                height: 1.4rem;
                font-size: 1.4rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 0px;
                margin-bottom: 1.5rem;
                padding-left: 1.5rem;
            }

            .number {
                width: 100%;
                height: 1.6rem;
                font-size: 2rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #00FFFA;
                line-height: 0px;
                padding-left: 1.5rem;
            }
        }

        .right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 200.6rem;
            height: 8.2rem;
            background-image: url('../../../../assets/images/zhangzi/tongji/renlian.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .number {
                color: #00B1FB;
            }
        }
    }
}
</style>